<template>
    <el-row>
        <el-col :span="24">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                    width="200"
                    align="center"
                    prop="class"
                    label="维修类目">
                    <template slot-scope="scope">
                        {{ scope.row.class }}
                    </template>               
                </el-table-column> 
                <el-table-column
                    align="center"
                    prop="name"
                    label="维修项目/图标">
                    <template slot-scope="scope">
                        <div class="repair-class-data">
                            <div v-for="(item, index) in scope.row.classData" :key="index.id">
                                <el-popover placement="top" trigger="hover">
                                    <div style="text-align:center;"><i :style="{color:item.color}" :class="item.icon"></i></div>
                                    <el-button size="mini" type="primary" plain slot="reference" @click="showEditRepairItem(item.id)">{{ item.name }}</el-button>
                                </el-popover>
                                <el-dialog
                                    :show-close="false"
                                    title="修改"
                                    :visible.sync="editRepairItemInput===item.id"
                                    width="30%">
                                    <el-form :model="item">
                                        <el-form-item label="项目名称">
                                            <el-input v-model="item.name" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="项目图标">
                                            <el-input v-model="item.icon" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="图标颜色">
                                            <el-input v-model="item.color" autocomplete="off"></el-input>
                                            <el-color-picker v-model="item.color"></el-color-picker>
                                        </el-form-item>
                                    </el-form>
                                    <span slot="footer" class="dialog-footer">
                                        <el-button @click="editRepairItemInput=''">取 消</el-button>
                                        <el-button type="primary" @click="editRepairItem(scope.row.id,item)">确 定</el-button>
                                    </span>
                                </el-dialog>
                            </div>
                        </div>                      
                    </template>              
                </el-table-column>   
                <el-table-column 
                    width="200"
                    align="center"
                    label="操作"> 
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        @click="repairAdd(scope.$index, scope.row)">添加项目</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="repairDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-dialog
            title="添加维修"
            :visible.sync="addRepairDialog"
            width="40%">
            <el-form :model="repairItem">
                <el-form-item label="项目名称">
                    <el-input v-model="repairItem.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="项目图标">
                    <el-input v-model="repairItem.icon" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图标颜色">
                    <el-input v-model="repairItem.color" autocomplete="off"></el-input>
                    <el-color-picker v-model="repairItem.color"></el-color-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addRepairDialog = false">取 消</el-button>
                <el-button type="primary" @click="addRepairSure">确 定</el-button>
            </span>
        </el-dialog>
    </el-row>
</template>
<script>
export default {
    props:{
        tableData:{
            type:Array,
            required:true
        }
    },
    data(){
        return {
            editRepairItemInput:'',
            addRepairDialog:false,
            // editRepair:false,
            // addProject:{},
            repairItem:{
                name:'',
                color:'#409EFF',
                icon:''
            },
            editProject:{},
        }
    },
    computed:{
        
    },
    methods:{
        //添加项目
        repairAdd(index,row){
            this.addRepairDialog = true;
            console.log(index,row)
        },
        //添加项目确认
        addRepairSure(){

        },
        //删除项目
        repairDelete(index,row){
            // console.log(index, row);
            this.$confirm(`确定删除维修项目${ row.name }，是否继续？`,'提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type:'success',
                    message:'删除成功'
                });
                // let val = this.tableData.filter((item) => { return item.id !== row.id;});
                // this.tableData = val;
            }).catch( () => {
                this.$message({
                    type:'info',
                    message:'已取消删除'
                });
            })
        },
        //修改项目显示
        showEditRepairItem(itemId){
            this.editRepairItemInput = itemId;
        },
        //修改项目确认
        editRepairItem(classId,item){
            // let data = {
            //     classId:classId,
            //     item:item
            // }
            // this.$emit('editRepairItem', data)
            console.log(classId,item)
        }
    },
    
}
</script>
<style lang="scss" scoped>
    @import '@/assets/icon/icon.scss';
    .repair-class-data{
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
    }
    .repair-class-data div{
        margin: 5px 5px;
    }
</style>
